<template>
  <div 
    v-if="visible"
    :class="[
      'axiom-loading',
      `axiom-loading--${size}`,
      { 'axiom-loading--overlay': overlay }
    ]"
  >
    <div class="axiom-loading__spinner">
      <div :class="['axiom-loading__icon', `axiom-loading__icon--${type}`]">
        <div v-if="type === 'dots'" class="axiom-loading__dots">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div v-else-if="type === 'spin'" class="axiom-loading__spin">
          <AxiomIcon name="spinner" />
        </div>
        <div v-else-if="type === 'pulse'" class="axiom-loading__pulse">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div v-else-if="type === 'bars'" class="axiom-loading__bars">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
    
    <div v-if="text" class="axiom-loading__text">{{ text }}</div>
  </div>
</template>

<script>
import AxiomIcon from './AxiomIcon.vue';

export default {
  name: 'AxiomLoading',
  components: {
    AxiomIcon
  },
  props: {
    visible: { type: Boolean, default: true },
    type: {
      type: String,
      default: 'spin',
      validator: (value) => ['dots', 'spin', 'pulse', 'bars'].includes(value)
    },
    size: {
      type: String,
      default: 'default',
      validator: (value) => ['small', 'default', 'large'].includes(value)
    },
    text: { type: String, default: '' },
    overlay: { type: Boolean, default: false }
  },
  created() {
    // this.$logger.debug('AxiomLoading组件初始化', { type: this.type, size: this.size, overlay: this.overlay });
  }
}
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-loading';
</style> 